<!-- Created by ctsi-biyi-generator -->

<template>
  <div>
    <Row style="">
      <Row style="margin: 2px 0 10px 0">
        <Form
          ref="formCustom"
          :inline="true"
          :model="formCustom"
          :label-width="80"
        >
        <FormItem label="字典类型">
          <Select v-model="formCustom.dicType" filterable>
                <Option v-for="item in dicList" :value="item.value" :key="item.value">{{ item.labels }}</Option>
            </Select>
        </FormItem>
        <span @click="handleSearch" style="margin: 0 10px"
          ><Button type="primary" icon="ios-search">查询</Button></span
        >
        <Button @click="handleCancel" type="default">重置</Button>
        <div style="float: right">
          <Button
            @click="handleCreateOrEditItem"
            type="primary"
            icon="md-add"
            style="margin: 0 20px"
            >新建</Button
          >
        </div>
      </Form>
    </Row>
      <Row style="width: 100%">
        <Col span="24">
          <Table
            :loading="loading"
            :columns="columns"
            :data="dataList"
            @on-sort-change="sortChange"
            @on-selection-change="selectChange"
          ></Table>
        </col>

      </Row>

      <Row type="flex" justify="end" align="middle">
        <div>
          <Page
          :current="currentPageNum + 1"
          :total="dataCount"
          @on-change="handlePageChange"
          @on-page-size-change="changePage"
          show-elevator
          show-sizer
          show-total
          style="padding: 10px 10px 0 0"
        ></Page>
        </div>
      </Row>
    </Row>
  </div>
</template>

<script>
import Util from '@/libs/util.js'

export default {
  name: 'searchable-table',

  data () {
    return {
      loading: true,
      dataCount: 0,
      currentPageNum: 0,
      deleteList: [],
      dataList: [],
      formCustom: {
        size: 10
      },
      dicList: [
        {
          value: 1,
          label: '是否'
        },
        {
          value: 2,
          label: '选择框'
        },
        {
          value: 3,
          label: '组件名'
        },
        {
          value: 4,
          label: '性别'
        }
      ],
      columns: [
        {
          key: 'dicType',
          title: '字典类型'
        },
        {
          title: '类型名称',
          key: 'dicTypeName'
          // align: "center",
        },
        {
          key: 'parentIdName',
          title: '父级类型名称'
          // align: "center"
        },
        {
          title: '操作',
          align: 'center',
          width: 280,
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.handleEditType(params.row)
                    }
                  }
                },
                '编辑类型'
              ),
              h('span', { style: {
                width: '1px',
                backgroundColor: '#2d8cf0',
                height: '15px',
                display: 'inline-block',
                verticalAlign: 'middle',
                margin: '-2px 10px 0'
              } }),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.handleEditItem(params.row)
                    }
                  }
                },
                '编辑字典'
              ),
              h('span', { style: {
                width: '1px',
                backgroundColor: '#2d8cf0',
                height: '15px',
                display: 'inline-block',
                verticalAlign: 'middle',
                margin: '-2px 10px 0'
              } }),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除此类型下所有字典值吗?',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.delete(params.row.dicType, params.index)
                    }
                  }
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        margin: '0 5px'
                      },
                      props: {
                        type: 'error',
                        size: 'small',
                        placement: 'top'
                      }
                    },
                    '删除'
                  )
                ]
              )
            ])
          }
        }
      ]
    }
  },
  computed: {
    activeUsers () {
      return this.columns.filter((item) => {
        return item.searchShow === true
      })
    }
  },
  methods: {
    init () {
      this.search(this.formCustom)
    },
    // 删除
    delete (dicType, index) {
      let self = this
      let page = this.currentPageNum
      Util.http
        .delete('/api/cscpDics/DeleteType' + '/' + dicType)
        .then(function (response) {
          self.dataList.splice(index, 1)
          self.dataCount--
          if (self.dataList.length === 0 && page > 1) {
            self.handlePageChange(page)
          }
          self.$Message.success('删除成功')
        })
        .catch(function (error) {
          console.log(error)
        })
    },

    selectChange (list) {
      this.deleteList = list
    },

    search (argumentObj) {
      let self = this
      Util.http
        .get('/api/cscpDics/getCscpTypeInfo', {
          params: argumentObj
        })
        .then(function (response) {
          self.dataList = response.data.list
          self.dataCount = response.data.total
          self.loading = false
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 远程搜索
    sortChange (data) {
      // console.log(data);
    },
    handleSearch () {
      // 还需对formCustom进行处理
      this.currentPageNum = 0
      this.init()
    },
    handleCancel () {
      this.currentPageNum = 0
      this.formCustom.page = 0
      this.formCustom.dicType = null
      this.init()
    },
    // 换页
    handlePageChange (pageNum) {
      this.currentPageNum = pageNum - 1
      this.formCustom.page = pageNum
      this.init()
    },
    changePage (size) {
      this.loading = true
      this.formCustom.size = size
      this.init()
    },
    // 新建
    handleCreateOrEditItem () {
      this.$router.push({
        name: 'paramDicAdd'
      })
    },
    handleEditItem (argu) {
      this.$byStoreSet('paramDicEdit', argu)
      this.$router.push({
        name: 'paramDicEdit',
        params: {
          type: argu
        }
      })
    },
    // 初始化下拉框
    initSelect () {
      Util.http.get('/api/cscpDics/getType').then(res => {
        this.dicList = res.data.map(item => {
          return { value: item.dicType, labels: item.dicTypeName }
        })
      })
    },
    // 编辑类型
    handleEditType (argu) {
      this.$byStoreSet('paramDicType', argu)
      this.$router.push({
        name: 'paramDicType',
        params: {
          type: argu
        }
      })
    }
  },
  mounted () {
    this.init()
    this.initSelect()
  }
}
</script>
